{% extends "bases/base-left.html" %}
{% block title %}
    Hosts
{% endblock %}

<!--地图坐标-->
{% block page-map-name %}
    <li><a href="{% url 'index' %}" ><i class="fa fa-dashboard"></i>Home</a></li>
    <li class="active"><i class="fa fa-dashboard"></i>主机管理</li>
{% endblock %}

<!--表头信息--〉
{% block page-title %}
    主机管理
{% endblock %}

<!--副标题--〉
{% block page-title-sm %}
    主机表
{% endblock %}



{% block page-rcontent %}
    <!-- /.row -->
    <section class="content">
    <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
{#              <h3 class="box-title">Responsive Hover Table</h3>#}
                <a href="{% url 'addhost' %}" name="addhost" class="label label-primary">添加</a>
              <div class="box-tools">
                <div class="input-group input-group-sm" style="width: 150px;">
                  <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

                  <div class="input-group-btn">
                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover" id="hosts-table">
                <tbody><tr>
                  <th>ID</th>
                  <th>名称</th>
                  <th>IP地址</th>
                  <th>CPU</th>
                  <th>Mem</th>
                  <th>所属业务</th>
                  <th>操作</th>
                </tr>
                {% if status %}
                    {% for row in data.host_list %}
                        <tr>
                          <td name="hid">{{  row.id }}</td>
                          <td>{{  row.Name }}</td>
                          <td>{{  row.IP }}</td>
                          <td>{{  row.CPU }}</td>
                          <td>{{  row.Mem }}</td>
                          <td>{{  row.callCircuit.Name }}</td>
                          <td>
                              <a name="showhost" class="label label-success" hid="{{ row.id }}">查看</a>
{#                              <a name="edithost" class="label label-warning" href="/cmdb/edithost/?hid={{ row.id }}">修改</a>#}
                              <a name="edithost" class="label label-warning" href="{% url 'edithost' hid=row.id %}">修改</a>
                              <a name="delhost" class="label label-danger" data-toggle="modal" data-target="#delHostModal" hid="{{ row.id }}">删除</a>
                          </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <div>{{ msg }}</div>
                {% endif %}
              </tbody></table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>

        <!--分页-->
        {% include "bases/paginator.html" %}
    </section>
    <!--del模态框-->
    <div class="modal fade" id="delHostModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">删除条目</h4>
                </div>
                <div class="modal-body" id="modal-del">
                    编号:<span style="color:red"></span>是否删除该条目？
                    <form id="del-form">
                        {% csrf_token %}
                        <input type="text"  name="id" class="hide" />

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button id="delRow" type="submit" class="btn btn-danger">删 除</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripter %}
    <script>
        $(function () {
            DelectHost()
        })

        function DelectHost() {
            $("#hosts-table").on('click', 'a[name="delhost"]', function () {
                v = $(this).attr('hid')
                $('#modal-del').find('span').text(v)
                $('#modal-del').find("input[name='id']").val(v)
            })

            $("#delRow").click(function () {
                $.ajax({
                    url: '/cmdb/delhost/',
                    type: 'Post',
                    data: $("#del-form").serialize(),
                    dataType: "json",
                    success: function (res) {
                        if (res.status) {
                            $("#delhost").find('td[name="hid"]').each(function () {
                                $val = $(this).text()
                                if (res.data.id == $val) {
                                    $(this).parent().remove()
                                }
                            })
                        } else {
                            alert(res.msg)
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}